<template>
  <div>
    <a-popover trigger="click" :arrow="false">
      <a-button type="ghost" shape="circle">
        <EyeOutlined />
      </a-button>
      <template #content>
        <a-card class="w-[60vw]" :bodyStyle="{ padding: '1rem' }">
          <div>
            <a-descriptions title="基本信息">
              <a-descriptions-item label="商品名">{{ data.goodsName }}</a-descriptions-item>
              <a-descriptions-item label="用户名">{{ data.username }}</a-descriptions-item>
              <a-descriptions-item label="平台">{{ data.platform }}</a-descriptions-item>
            </a-descriptions>
          </div>
          <div class="flex">
            <a-descriptions title="变价前" :column="1" class="flex-1">
              <a-descriptions-item :label="t(item.label)" v-for="item in columns">
                <ul
                  v-if="item.key === 'expands'"
                  class="w-full grid gap-2 max-h-[200px] overflow-y-auto"
                >
                  <li v-for="(m, key) in getData(rawData, item.key)" :key="key">
                    <div class="flex justify-between items-center">
                      <span>字段名</span>
                      <a-tag>{{ m.fieldName }}</a-tag>
                    </div>
                  </li>
                </ul>
                <XImage
                  v-else-if="
                    ['goodsPhoto', 'cover'].includes(item.key) && getData(rawData, item.key)
                  "
                  :height="60"
                  :src="getData(rawData, item.key)"
                ></XImage>
                <video
                  v-else-if="item.key === 'goodsVideo' && getData(rawData, item.key)"
                  :height="60"
                  :src="getData(postData, item.key)"
                  controls
                ></video>
                <EmptyLabel v-else :text="getData(rawData, item.key)?.toString()"></EmptyLabel>
              </a-descriptions-item>
            </a-descriptions>
            <a-descriptions title="变价后" :column="1" class="flex-1">
              <a-descriptions-item :label="t(item.label)" v-for="item in columns">
                <ul
                  v-if="item.key === 'expands'"
                  class="w-full grid gap-2 max-h-[200px] overflow-y-auto"
                >
                  <li v-for="(m, key) in getData(postData, item.key)" :key="key">
                    <div class="flex justify-between items-center">
                      <span>字段名</span>
                      <a-tag>{{ m.fieldName }}</a-tag>
                    </div>
                  </li>
                </ul>
                <XImage
                  v-else-if="
                    ['goodsPhoto', 'cover'].includes(item.key) && getData(postData, item.key)
                  "
                  :height="60"
                  :src="getData(postData, item.key)"
                ></XImage>
                <video
                  v-else-if="item.key === 'goodsVideo' && getData(rawData, item.key)"
                  :height="60"
                  :src="getData(postData, item.key)"
                  controls
                ></video>
                <EmptyLabel
                  :style="{
                    color: getData(rawData, item.key) !== getData(postData, item.key) ? 'red' : '',
                  }"
                  v-else
                  :text="(postData as any)[item.key]?.toString()"
                ></EmptyLabel>
              </a-descriptions-item>
            </a-descriptions>
          </div>
        </a-card>
      </template>
    </a-popover>
  </div>
</template>

<script setup lang="ts">
import type { GoodsRecord } from '@/api/modules/data/goods';
interface Detail {
  barCode: string;
  cover: string;
  department: string;
  disable: boolean;
  expands: Expand[];
  goodsId: number;
  goodsName: string;
  goodsPhoto: string;
  goodsVideo: string;
  memberPrice: number;
  retailPrice: number;
  salePrice: number;
  share: string;
}

interface Expand {
  fieldCode: string;
  fieldId: number;
  fieldName: string;
  status: string;
}
const props = defineProps<{
  data: GoodsRecord;
}>();
const { t } = useI18n();
const getData = (data: any, key: any) => {
  return data[key];
};

const columns = [
  {
    label: '会员价',
    key: 'memberPrice',
  },
  {
    label: '零售价',
    key: 'retailPrice',
  },
  {
    label: '销售价',
    key: 'salePrice',
  },
  {
    label: '商品名称',
    key: 'goodsName',
  },
  {
    label: '条形码',
    key: 'barCode',
  },
  {
    label: '封面',
    key: 'cover',
  },
  {
    label: '部门',
    key: 'department',
  },
  {
    label: '是否禁用',
    key: 'disable',
  },
  {
    label: '扩展字段',
    key: 'expands',
  },
  {
    label: '商品ID',
    key: 'goodsId',
  },
  {
    label: '商品照片',
    key: 'goodsPhoto',
  },
  {
    label: '商品视频',
    key: 'goodsVideo',
  },
  {
    label: '分享链接',
    key: 'share',
  },
];

const rawData = ref<Detail>(JSON.parse(props.data.rawData));
const postData = ref<Detail>(JSON.parse(props.data.postData));
</script>

<style lang="scss" scoped></style>
